<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<%@include file="../common/common_ui.jsp"%>
<link href="js/zTree/css/metro.css" rel="stylesheet" />
<script src="js/zTree/js/jquery.ztree.core-3.5.min.js"></script>
<script src="js/zTree/js/jquery.ztree.excheck-3.5.min.js"></script>

<title>角色管理</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<style type="text/css">
	.selected{
		background-color: #efefef;
	}
</style>
<script type="text/javascript">
   var setting = {  
		    check: {
	            enable: true,
	            chkStyle: "checkbox",
	    		chkboxType: { "Y": "ps" }
	        },
	        view: {
	            dblClickExpand: true,
	            showLine: true,
	            selectedMulti: false,
	            nameIsHTML: false,
	        },
	        data: {
	            simpleData: {
	                enable:true,
	                idKey: "id",
	                pIdKey: "pId",
	                rootPId: -1
	            }
	        },
	        callback: {
	        	beforeClick: beforeClick
			}
	};  
	var treeNodes = new Array();
	/*
	* 点击节点选择复选框
	*/
	function beforeClick(treeId, treeNode) {
		var zTree = $.fn.zTree.getZTreeObj("tree");
		zTree.checkNode(treeNode, !treeNode.checked, true, true);
		return false;
	}
	$(function(){
		/*
		* 获取资源信息
		*/
		$.ajax({
			    async: false,  
		        cache: false, 
		        type: 'POST',  
		        dataType : "json",  
		        url: "<%=path%>/roleInfo/getTree.do",
		        success:function(data){ 
		            treeNodes = data;   
		        }      
		});
		/*
		* 是否有资源
		*/
		if(treeNodes.length==0){
			$("#authBtn").attr("disabled",true);
		}else{
			//创建树
			$.fn.zTree.init($("#tree"), setting, treeNodes);
		}
		/*
		* 获取角色权限
		*/		
		$(".cktr").click(function (){
			var _this=$(this);
			$(".selected").removeClass("selected")
			_this.addClass("selected");		
			var roleId=_this.attr("myid");            
            var zTree = $.fn.zTree.getZTreeObj("tree");
            $.post("<%=path%>/roleInfo/getRoleResource.do", {
                times:new Date().getTime(),
                roleId:roleId
                }, function(data) {
                	 zTree.checkAllNodes(false);
                	 if (data.length>0){
                		 for(var i=0;i<data.length;i++){
                    		 var node = zTree.getNodeByParam("id", data[i], null);
                             node.checked = true;
                             zTree.updateNode(node);
                    	 }
                	 }else{
                		 zTree.checkAllNodes(false);
                	 }
        	});
        });
		/*
		* 保存角色权限
		*/
		$("#authBtn").click(function(){
			var roleInfo = $("#roleBody").find(".selected");
			var roleId;
			if(roleInfo.size()==0){
				$.fwAlert("dis_msg","请选择角色");
				return false;
			}else{
				roleId = roleInfo.find("input").val();
			}
			var zTree = $.fn.zTree.getZTreeObj("tree");
			var nodes = zTree.getCheckedNodes(true);
			if (nodes.length==0){				
				$.fwAlert("dis_msg","请选择资源");
				return false;
			}else{
				$(this).button('loading');
				var resArray = new Array();
				for(var i=0;i<nodes.length;i++){
					 resArray[i]=nodes[i].id;
            	}
				var resIds = resArray.join();
				$.post("roleInfo/saveRoleResource.do",{times:new Date().getTime(),roleId:roleId,resIds:resIds},function(a,b) {
					$("#authBtn").button('reset');
					var data=a.msg;
	            	if(data=="success"){	            		
	                	$.fwAlert("dis_msg","分配成功","success");
	                }else{
	                	$.fwAlert("dis_msg","分配失败");
	                }
	        	});
			}
		});
		/*
		* 关闭提示
		*/
		$(".close").click(function(){
			$("#role_alert").hide();
			$("#role_res_alert").hide();
		});
	});
/*
* 新增角色
*/
function addRoleInfo(){
	window.parent.sopen("<%=path%>/roleInfo/toRoleInfoEditPage.do","新增角色",500,400);
};
/*
* 修改角色
*/
function  updateRoleInfo(role_id){
	window.parent.sopen("<%=path%>/roleInfo/toRoleInfoEditPage.do?id="+role_id,"修改角色",500,400);
};
/*
* 作废角色
*/
function delRoleInfo(role_id,role_name){
	 var message = "确定作废角色【"+role_name+"】吗？";
	 window.parent.sconfirm(message, function(){
		 $.post("<%=path%>/roleInfo/deleteRoleInfo.do", {
             times:new Date().getTime(),
             id:role_id
             }, function(data) {
            	 $("#frm").submit();
     	});
	 });
};
/*
* 重启角色
*/
function restartRoleInfo(role_id,role_name){
	 var message = "确定启用角色【"+role_name+"】吗？";
	 window.parent.sconfirm(message, function(){
		 $.post("<%=path%>/roleInfo/restartRoleInfo.do", {
				times : new Date().getTime(),
				id : role_id
			}, function(data) {
				$("#frm").submit();
			});
		});
	};
</script>
</head>
<body>
	<!-- 角色资源-->
	<div>
		<div id="roleShow" style="float: right;width:26%;height:710px">
			<div class="widget" style="overflow:auto;height:100%;max-height:705px;">
				<div class="widget-head">
					<div class="pull-left">资源</div>
					<div class="pull-right">
						<button id="authBtn" data-loading-text="loading" class="btn btn-xs btn-primary">分配权限</button>
					</div>
					<div class="clearfix"></div>
				</div>								
				<%-- 分配后提示 --%>
				<div id="dis_msg"></div>
				
				<div>
					<ul id="tree" class="ztree"></ul>
				</div>
			</div>
		</div>
		<div style="float: left;width:73%">
			<!-- 角色查询条件-->
			<div class="widget">
				<div class="widget-head">
					<div class="pull-left">查询条件</div>
					<div class="clearfix"></div>
				</div>
				<div class="widget-content">
					<div class="padd">
						<!-- Form starts.  -->
						<form id="frm" name="frm" class="form-horizontal" role="form" method="post"
							action="roleInfo/queryRoles.do">
							<table>
								<tr>
									<td><label>角色名称:</label>
									</td>
									<td><input id="name" name="name" type="text" class="form-control"
										value="${param.name}" style="width:150px">
									</td>
									<td>
									<!-- 状态1，有效；0，无效 -->
									<input type="hidden" name="status" id="status">
									&nbsp;&nbsp;
									<div class="btn-group">
									<button type="submit" id="queryRoles" class="btn btn-primary">查询</button>
									<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
									    <span class="caret"></span>
									</button>
									<ul class="dropdown-menu" role="menu">
									    <li><a href="javascript:$('#status').val(1);document.frm.submit();">查询有效角色</a></li>
									    <li><a href="javascript:$('#status').val(0);document.frm.submit();">查询无效角色</a></li>
									</ul>
									</div>
									</td>
									<td>
									&nbsp;&nbsp;
									<input type="button"
										id="addRole" class="btn btn-default" value="新增"
										onclick="addRoleInfo();" />
									</td>
								</tr>
							</table>
						</form>
					</div>
				</div>
			</div>
			<!-- 角色查询结果-->
			<div class="widget">
				<div class="widget-head">
					<div class="pull-left">查询结果</div>
					<div class="clearfix"></div>
				</div>
				<div class="widget-content">
					<table class="table table-hover table-bordered ">
						<thead>
							<tr>
								<th>序号</th>
								<th>角色名称</th>
								<th>描述</th>
								<th>状态</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody id="roleBody">
							<c:forEach items="${pageResult.list}" var="nsVar"
								varStatus="status">
								<tr class="cktr" myid="${nsVar.id}">
									<input type="hidden" value="${nsVar.id}">
									<td>${status.index+1+pageResult.pageSize*(pageResult.current-1)}</td>
									<td>${nsVar.name}</td>
									<td>${nsVar.memo}</td>
									<td >
										<c:if test="${nsVar.status=='0'}">
											<span class="label label-default">无效</span>
										</c:if> <c:if test="${nsVar.status=='1'}">
											<span class="label label-success">有效</span>
										</c:if>
									</td>
									<td><c:if test="${nsVar.status=='1'}">
											<button type="button" class="btn btn-xs btn-info"
												id="btnModify" onclick="updateRoleInfo('${nsVar.id}');">
												<span class="glyphicon glyphicon-pencil"></span>编辑
											</button>&nbsp;
											<button type="button" class="btn btn-xs btn-danger" id="btnDel" value="作废"
												onclick="delRoleInfo('${nsVar.id}','${nsVar.name}');">
												<span class="glyphicon  glyphicon-trash"></span>作废
											</button>&nbsp;
											</c:if> 
											<c:if test="${nsVar.status=='0'}">
											<button type="button" class="btn btn-xs btn-success" id="btnRestart"
												onclick="restartRoleInfo('${nsVar.id}','${nsVar.name}');">
												<span class="glyphicon glyphicon-ok"></span>启用
											</button>
										</c:if>
									</td>
								</tr>
							</c:forEach>
						</tbody>
					</table>
					<fw:page formName="pageResult" />
				</div>
			</div>
		</div>
	</div>
</body>
</html>
